import React, { Component } from 'react';
let {
  Provider, Consumer
} = React.createContext();
class ButtonAddCmp extends Component {
  render() {
    return <Consumer>
      {
        ({handleAdd})=>{
          return <button onClick={()=>{
            handleAdd();
          }}>+</button>
        }
      }
    </Consumer>
  }
};
class ButtonSubCmp extends Component {
  render() {
    return <Consumer>
      {
        ({handleSub})=>{
          return <button onClick={()=>{
            handleSub(); 
          }}>-</button>
        }
      }
    </Consumer>
  }
};
class Counter extends Component {
  render() {
    return <Consumer>
      {
        ({ num }) => {
          return <span>{num}</span>;
        }
      }
    </Consumer>
  }
};
class Test extends Component {
  render() {
    return <div>
      {this.props.children}
    </div>
  }
}
class App extends Component {
  state = {
    num: 666
  };
  handleAdd = (params) => {
    this.setState({
      num: this.state.num + 1
    })
  }
  handleSub = (params) => {
    this.setState({
      num: this.state.num - 1
    })
  }
  render() {
    return (
      <div>
        <Provider value={{
          num: this.state.num,
          handleAdd:this.handleAdd,
          handleSub:this.handleSub,
        }}>
          <Test>
            <ButtonAddCmp></ButtonAddCmp>
            <Counter></Counter>
            <ButtonSubCmp></ButtonSubCmp>
          </Test>
        </Provider>

      </div>
    );
  }
}

export default App;
